<template>
	<gui-page :fullPage="true" ref="guiPage">
		<template v-slot:gBody>
			<view class="gui-flex1 gui-flex gui-column">
				<view class="coursetype-box">
					<view class="coursegroup" :class="currenttype=='group'?'active':'unactive'" @tap="checkupG">
						团体课
					</view>
					<view class="coursepersonal" :class="currenttype=='personal'?'active':'unactive'" @tap="checkupP">
						私教课
					</view>
					<view class="next-week">
						<up-button type="primary" shape="circle" color="#007CFF" icon="arrow-right-double"
							v-if="!nextWeek" @tap="nextData" text="下周"></up-button>
						<up-button type="primary" shape="circle" color="#007CFF" icon="arrow-left-double"
							v-if="nextWeek" @tap="lastData" text="上周"></up-button>
					</view>
				</view>
				<view class="" v-if="is_member==2">
					<view class="" v-if="currenttype=='group'">
						<view class="gui-margin-x"
							style="color: #808080;font-size: 24rpx;display: flex;justify-content:space-between;align-items: flex-end;">
							<view class="" style="float: left;">
								共计：{{groupschedules.length}}节课
							</view>
							<view class=""
								style="float: right;color:rgba(0, 0, 0, .9);font-weight: 900;font-size: 44rpx;">
								{{currentMonthStr}}
							</view>
						</view>
						<hulu-appointment :contentList="groupschedules" @onPulling="onPulling"
							@SelectHeader="SelectHeader" v-model:currentDate="currentDate" @initForType="initForType"
							@myOnRefresh="myOnRefresh" :TimeType="TimeType" ref="hulugRef"
							@Appointment="Appointment"></hulu-appointment>
					</view>


					<view class="" v-if="currenttype=='personal'">
						<view class="gui-margin-x"
							style="color: #808080;font-size: 24rpx;display: flex;justify-content:space-between;align-items: flex-end;">
							<view class="" style="float: left;">
								共计：{{personalschedules.length}}节课
							</view>
							<view class=""
								style="float: right;color:rgba(0, 0, 0, .9);font-weight: 900;font-size: 44rpx;">
								{{currentMonthStr}}
							</view>
						</view>
						<hulu-appointment :contentList="personalschedules" @onPulling="onPulling"
							@SelectHeader="SelectHeader" v-model:currentDate="currentDate" @initForType="initForType"
							@myOnRefresh="myOnRefresh" :TimeType="TimeType" @Appointment="Appointment" ref="hulupRef"
							@resetParam="resetParam"></hulu-appointment>
					</view>

				</view>
				<view class="gui-padding-x" v-else>
					<hulu-empty></hulu-empty>
				</view>
			</view>
		</template>
	</gui-page>
</template>
<script>
	import graceJS from '@/Grace6/js/grace.js';
	import useGroupschedule from '@/api/groupschedule'
	import usePersonalschedule from '@/api/personalschedule'
	import useUser from '@/api/user'
	import dayjs from 'dayjs'
	const {
		getUserInfo,
		userInfoState
	} = useUser();
	const {
		groupschedules,
		getGroupschedule
	} = useGroupschedule()
	const {
		personalschedules,
		getPersonalschedule
	} = usePersonalschedule()
	export default {
		data() {
			return {
				//currenttype:当前类型，是group还是personal
				currenttype: 'group',
				mainHeight: 300,
				selectHeader: 0,
				nextWeek: false,
				WeekList: [],
				user: {},
				day: 1,
				is_member: false,
				TimeType: "本周日期",
				currentMonthStr: dayjs(new Date()).format('YYYY年M月'),
				groupschedules: groupschedules,
				personalschedules: personalschedules,
				currentDate: dayjs().add(1, "day").format("YYYY-MM-DD"),
				initDate: dayjs().add(1, "day").format("YYYY-MM-DD"),
			}
		},
		onLoad() {

			// 获取页面主体高度从而得出主体高度
			graceJS.getRefs('guiPage', this, 0, (ref) => {
				ref.getDomSize('guiPageBody', (e) => {
					// 02. 导航的高度
					// 可以 使用 graceJS.select() 函数动态获取， 也可以使用 uni.upx2px 转换已知高度
					this.mainHeight = e.height - uni.upx2px(110);
				});
			});
		},
		async onShow() {
			await getUserInfo()
			this.user = userInfoState
			
			this.is_member = this.user.is_member
			this.resetAllOpt()
		},
		methods: {
			async resetAllOpt(){
				this.nextWeek = false
				this.currenttype="group"
				this.checkupG()
				this.currentMonthStr = dayjs(new Date()).format('YYYY年M月')
				this.currentDate = dayjs().add(1, "day").format("YYYY-MM-DD")
				this.initDate = dayjs().add(1, "day").format("YYYY-MM-DD")
				await this.initForType('group', this.initDate)
			},
			async initForType(type, date) {
				if (type == 'group') {
					await getGroupschedule(date)
				}
				if (type == "personal") {
					await getPersonalschedule(data)
				}
			},

			nextData() {
				this.TimeType = "下周日期"
				//当前日期加上7天
				let newDay = dayjs(this.currentDate).add(7, 'day').format("YYYY-MM-DD")
				this.currentDate = newDay
				this.nextWeek = true
			},
			lastData() {
				this.TimeType = "上周日期"
				let newDay = dayjs(this.currentDate).add(-7, 'day').format("YYYY-MM-DD")
				this.currentDate = newDay
				this.nextWeek = false
			},
			onDateTabsChange(val) {
				console.log(val.code)
			},
			checkupG() {
				this.currenttype = "group";
				this.TimeType = "本周日期"
				this.resetParam()
				console.log(this.currentDate)
				this.SelectHeader({
					code: this.currentDate
				})
			},
			checkupP() {
				this.currenttype = "personal";
				this.TimeType = "本周日期"
				this.resetParam()
				console.log(this.currentDate)
				this.SelectHeader({
					code: this.currentDate
				})
			},
			resetParam() {
				this.currentDate = dayjs().add(1, "day").format("YYYY-MM-DD")
				this.nextWeek = false
			},
			// 选择头部日期
			SelectHeader(item) {
				console.log("父级选择头部日期,当前选择日期", item, this.currentDate);
				//还需要修改月份
				this.currentMonthStr = dayjs(this.currentDate).format('YYYY年M月')
				if (this.currenttype == "group") {
					getGroupschedule(item.code)
				}
				if (this.currenttype == "personal") {
					getPersonalschedule(item.code)
				}

			},
			// 下拉刷新 
			onPulling() {
				// console.log('onPulling');
			},
			myOnRefresh(val) {
				if (this.currenttype == 'group') {
					getGroupschedule(this.currentDate)
				}
				if (this.currenttype == 'personal') {
					getPersonalschedule(this.currentDate)
				}
			},
			// 预约
			async Appointment(item) {

				if (this.currenttype == "group") {
					const linkParam = {
						type: "group",
						groupcourse_id: item.groupcourse_id,
						id: item.id
					}
					uni.navigateTo({
						url: `/subpage/appointment/group?id=${item.id}`
					})
				}
				if (this.currenttype == "personal") {
					//需要跳转到新页面
					uni.navigateTo({
						url: `/subpage/appointment/personal?&id=${item.id}`
					})
					return;
					let form = {
						user_id: user.ID,
						id: item.id,
						way: "mini",
						employee_id: item.employee_id,
						personalcourse_id: item.personalcourse_id
					}
					await storePAppointment(form)
				}
			}
		}
	}
</script>
<style scoped lang="scss">
	.coursetype-box {
		display: flex;
		font-size: 32rpx;
		margin: 10rpx 30rpx;
		position: relative;

		.next-week {
			width: 120rpx;
			position: absolute;
			right: 30rpx;
		}

		.coursegroup,
		.coursepersonal {
			line-height: 54rpx;
			height: 54rpx;
			padding: 10rpx 20rpx;
		}

		.coursepersonal {
			margin-left: 10rpx;
		}
	}

	.active {
		color: #2A82E4;
		background-color: #C2DEFF;
	}

	.unactive {
		color: #808080;
		background-color: #E5E5E5;
	}
</style>